<template>
	<div class="teacherContainer">
		<div class="header">
			<minMenu :structure="menusStructure" inline />
		</div>
		<!-- <div class="header">
			<div style="width: 60%;display: flex;justify-content: space-between;">
				<a-input v-model:value="searchData.name" placeholder="请输入名称" style="width: 180px" />
			</div>
			<div>
				<a-button type="primary" @click="(pagination.current = 1) & (tableData = []) & show()">查询</a-button>
				<a-button style="margin-left: 10px;" @click="(searchData = {}) & show()">重置</a-button>
			</div>
		</div> -->
		<div class="content">
			<div class="itemBox" v-if="route.name === 'collectTeacherDevelopment'">
				<projectItem :hasOperate="false" class="item" v-for="(item, i) in projectList" :key="item.id" :item="item"
					@handleClick="handleClick" />
				<div class="item" v-for="item in (5 - projectList.length%4)"></div>
				<div class="noData" v-if="!projectList.length">{{ t('common','暂无数据') }}</div>
			</div>
			<div class="itemBox" v-else>
				<learnProjectItem :hasOperate="false" class="item" v-for="(item, i) in projectList" :key="item.id" :item="item"
					@handleClick="handleClick" />
				<div class="item" v-for="item in (5 - projectList.length%4)"></div>
				<div class="noData" v-if="!projectList.length">{{ t('common','暂无数据') }}</div>
			</div>
			<div style="min-height: 60px;display: flex;align-items: center;justify-content: center;">
					<a-pagination style="text-align: center" @change="show" v-model:current="pagination.current" show-size-changer
				:page-size-options="['10', '20', '50']" :total="pagination.totalElements" :pageSize="pagination.size"
				@showSizeChange="(current, size) => { pagination.size = size }" />
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRoute,useRouter } from 'vue-router'
import projectItem from '@/components/items/projectItem.vue'
import learnProjectItem from '@/components/items/learnProjectItem.vue'
import { collectProjectPage, collectLearningPage } from '@/request/collect'
import { teacherCollectProjectCollect, teacherCollectProjectCancelCollect } from '@/request/teacher/project/development'
import { collectLearningCollect, collectLearningCancelCollect } from '@/request/learn/square'
import { learningSave, learningOnline, learningOffline, learningDelete } from '@/request/teacher/project/learn'
import { message, Modal } from 'ant-design-vue'
import minMenu from '@/components/common/minMenu.vue'
import { t } from '@/i18n'

const route = useRoute()
const router = useRouter()
const projectList = ref([])
const searchData = ref({})
const pagination = ref({ totalElements: 0, current: 1, size: 8 })
const menusStructure = [
  {
    path: '/collect/teacher/development',
    label: '开发项目',
  },
  {
    path: '/collect/teacher/learn',
    label: '学习项目',
  },
]

const show = async (page, pageSize) => {
	console.log(route.name , 'route.name')
	let req = {
		...pagination.value,
		page: pagination.value.current - 1,
		...searchData.value
	}
	let res = null
	if (route.name === 'collectTeacherDevelopment') res = await collectProjectPage(req)
	else res = await collectLearningPage(req)
	if (!res) return
	projectList.value = [...res.data.content]
	pagination.value = {
		...pagination.value,
		...res.data.page
	}
}
show()

const formModel = ref({ projectJobDTOList: [{}] })
const modal = reactive({ visible: false, formDisable: false, name: '' })
const handleClick = async ({ name, item }) => {
	console.log(name, '?')
	let req = { ...item }
	let res = null
	let operate = null
	switch (name) {
		case '新建项目':
			formModel.value = {
				projectJobDTOList: [{}]
			}
			modal.visible = true
			modal.formDisable = false
			modal.name = '新建项目'
			break
		case 'item':
			if (route.name === 'collectTeacherDevelopment') {
				let href = router.resolve({
					name: 'ProjectInterview',
					query: { id: item.id, isCheckedJob: true },
				})
				window.open(href.href, '_blank')
			} else {
				router.push({
					name: 'learnDataDisplay',
					query: {
						id: item?.id,
						name: item?.name,
						template: item?.projectTemplate,
					}
				})
			}

			
			break
		case '取消收藏':
			if (route.name === 'collectTeacherDevelopment') res = await teacherCollectProjectCancelCollect(req)
			else res = await collectLearningCancelCollect(req)
			if (!res) return
			message.success(t('projectCard','操作成功'))
			show()
			break
		case '收藏':
			if (route.name === 'collectTeacherDevelopment') res = await teacherCollectProjectCollect(req)
			else res = await collectLearningCollect(req)
			if (!res) return
			message.success(t('projectCard','操作成功'))
			show()
			break
		case '上线':
			res = await learningOnline(req)
			if (!res) return
			message.success('操作成功')
			show()
			break
		case '下线':
			res = await learningOffline(req)
			if (!res) return
			message.success('操作成功')
			show()
			break
		case '删除项目':
			operate = await new Promise((resolve, reject) => {
				Modal.confirm({
					content: '是否确认删除',
					onOk() {
						resolve(true);
					},
					confirmText: '确定',
					cancelText: '取消',
					onCancel() {
						resolve(false);
					},
				})
			})
			if (!operate) return
			res = await learningDelete([req.id])
			if (!res) return
			message.success('操作成功')
			show()
			break
	}
}
const loading = ref(false)
const handleSubmit = async (val) => {
	console.log(val, '1111')
	// let v = await formRef.value.validate().catch(err => false)
	// if (!v) return message.error('请检查表单数据')  
	let req = {
		...val,
		course: val?.course.join(),
		gradeClass: val?.gradeClass.join(),
	}
	loading.value = true
	let res = await learningSave(req)
	loading.value = false
	if (!res) return
	modal.visible = false
	message.success("保存成功")
	show()
}
</script>

<style lang="scss" scoped>
.teacherContainer {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80px;
		padding: 18px;
		background: #FFFFFF;
	}

	.content {
		min-height: 0;
		margin-top: 20px;
		overflow-y: auto;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* flex-wrap: wrap; */
		/* background: white; */
		border-radius: 10px;

		.itemBox {
			min-height: 0;
			overflow: auto;
			flex-grow: 1;
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;
			justify-content: space-between;
			width: 100%;
			position: relative;

			/* padding: 15px; */
			gap: 15px;
			.item {
				width: 270px;
			}
		}
	}
}

.noData {
	padding: 60px;
	width: 100%;
	text-align: center;
	color: #A3A6AD;
	font-size: 34rpx;
}
</style>